<template>
  <div>
    <el-dialog
      :title="dialogData.editTitle"
      :before-close="handleClose"
      :visible.sync="centerDialogVisible"
      :width="dialogWidth"
      center>
      <div class="dialog-edit-form">
        <el-form :model="form" inline label-position="right" :label-width="labelWidth" ref="formRef" :rules="rules">
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务名称" prop="name">
                <el-input v-model="form.name" autocomplete="off" placeholder="任务名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组名称" prop="groupName">
                <el-input v-model="form.groupName" autocomplete="off" placeholder="组名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="jobClass">
                <span slot="label">
                  <span class="form-label-with-tooltip">
                    <span>CLASS类名</span>
                    <el-tooltip placement="top" content="CLASS需要继承QuartzJobBean类">
                      <i class="el-icon-question form-label-with-tooltip-icon-pre-required"></i>
                    </el-tooltip>
                  </span>
                </span>
                <el-input type="textarea" :rows="2" v-model="form.jobClass" autocomplete="off" placeholder="请填写CLASS类名..."></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="cronExpression">
                <span slot="label">
                  <span class="form-label-with-tooltip">
                    <span>CRON表达式</span>
                    <el-tooltip placement="top" content="在线Cron表达式生成器 https://cron.qqe2.com">
                      <i class="el-icon-question form-label-with-tooltip-icon-pre-required"></i>
                    </el-tooltip>
                  </span>
                </span>
                <el-input v-model="form.cronExpression" autocomplete="off" placeholder="CRON表达式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态" prop="status">
                <el-select v-model="form.status" placeholder="状态" style="width: 150px"
                  :disabled="this.dialogData.editType === 'add'">
                  <el-option label="运行" :value="12781001"></el-option>
                  <el-option label="暂停" :value="12781002" v></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="3" v-model="form.remark" autocomplete="off" placeholder="请填写备注..."></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-edit-form-btn">
          <el-button type="primary" @click="handleConfirm" size="small">确认</el-button>
          <el-button @click="handleCancel" style="margin-left: 20px;" size="small">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuartzDialog',
  props: {
    dialogData: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: Object,
      default: () => ({})
    },
    centerDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      param: '',
      rules: {
        name: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        groupName: [
          { required: true, message: '请输入组名称', trigger: 'blur' }
        ],
        jobClass: [
          { required: true, message: '请输入CLASS类名', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请输入CRON表达式', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      },
      dialogWidth: '450px',
      labelWidth: '150px'
    }
  },
  mounted () {
    // 根据当前窗口宽度改变弹窗的宽度
    if (document.body.clientWidth < 700) {
      this.dialogWidth = '80%'
      this.labelWidth = '120px'
    } else {
      this.dialogWidth = '450px'
      this.labelWidth = '150px'
    }
  },
  methods: {
    // 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效
    handleClose () {
      this.resetAndEmit('close')
    },
    handleConfirm () {
      // 表单验证
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          let { id, name, groupName, jobClass, cronExpression, status, remark } = this.form
          let paramsAdd = {
            name, groupName, jobClass, cronExpression, status, remark
          }
          let paramsUpdate = {
            id, name, groupName, jobClass, cronExpression, status, remark
          }
          let param = this.dialogData.editType === 'edit' ? paramsUpdate : paramsAdd
          // console.log(param)

          if (this.dialogData.editType === 'edit') {
            this.$apis.updateQuartz(param).then(res => {
              // console.log(res)
              if (res && res.code === '200') {
                // 通过验证请求接口
                this.$notify({
                  title: '成功',
                  message: '编辑成功',
                  type: 'success'
                })
                this.resetAndEmit('confirm')
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                })
              }
            }).catch(err => {
              console.log(err)
              this.$notify.error({
                title: '错误',
                message: '请求异常'
              })
            })
          } else {
            this.$apis.createQuartz(param).then(res => {
              console.log(res)
              if (res && res.code === '200') {
                // 通过验证请求接口
                this.$notify({
                  title: '成功',
                  message: '新增成功',
                  type: 'success'
                })
                this.resetAndEmit('confirm')
              } else {
                this.$notify.error({
                  title: '错误',
                  message: res.message
                })
              }
            }).catch(err => {
              console.log(err)
              this.$notify.error({
                title: '错误',
                message: '保存成功'
              })
            })
          }
        } else {
          return false
        }
      })
    },
    // 取消
    handleCancel () {
      this.resetAndEmit('cancel')
    },
    // 清空表单并且传递通信父组件
    resetAndEmit (val) {
      // 清空数据在父组件中完成
      // this.$refs['formRef'].resetFields()
      // 清空表单验证
      // this.$refs['formRef'].clearValidate()
      // 传给父组件通信数据
      let obj = {
        centerDialogVisible: false,
        event: val
      }
      this.$emit('handleEvent', obj)
    }
  }
}
</script>

<style scoped>
  /* input前的label标签加粗 */
  /deep/ .el-form-item__label {
    font-size: 14px;
    color: #333;
    font-weight: 700;
  }

  /* dialog标题从居中变成靠左 */
  /deep/ .el-dialog--center {
    text-align: left
  }
</style>
